<template>
  <div class="msg-detail">
    <van-nav-bar fixed :z-index="100" title="确认订单" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div class="sub-msg-card-box">
        <div class="sub-msg-card" v-for="(item) in msgDetail.orderItemList" :key="item.id">
          <div class="pic-box">
            <img :src="item.productPic" />
          </div>
          <div class="sub-msg-content-box">
            <div class="goods-name">{{item.productName}}</div>
            <div class="sku-info">
              <div class="sku-detail">{{item.sp1}} {{item.sp2}}</div>
              <div class="count">✕{{item.productQuantity}}</div>
            </div>
            <div class="price">￥{{item.realAmount}}</div>
          </div>
        </div>
        <!-- <div class="sub-msg-card">
            <div class="pic-box"></div>
            <div class="sub-msg-content-box">
              <div class="goods-name">商品名称123456</div>
              <div class="sku-info">
                <div class="sku-detail">白色 均码</div>
                <div class="count">✕1</div>
              </div>
              <div class="price">￥11111</div>
            </div>
          </div>
          <div class="sub-msg-card">
              <div class="pic-box"></div>
              <div class="sub-msg-content-box">
                <div class="goods-name">商品名称123456</div>
                <div class="sku-info">
                  <div class="sku-detail">白色 均码</div>
                  <div class="count">✕1</div>
                </div>
                <div class="price">￥11111</div>
              </div>
            </div> -->
      </div>
      <div class="sub-logistics-info">
        <div class="logistics-box space-between">
           <div class="logistics-order-box">
              <div class="logistics-title">订单编号</div>
              <div class="logistics-content" id="copyVal">{{msgDetail.orderSn}}</div>
           </div>
          <div class="logistics-copy-btn" id='copy' data-clipboard-target="#copyVal" @click='Copy'>复制单号</div>
        </div>
        <div class="logistics-box">
          <div class="logistics-title">收货人姓名</div>
          <div class="logistics-content">{{msgDetail.receiverName}}</div>
        </div>
        <div class="logistics-box">
          <div class="logistics-title">收货人电话</div>
          <div class="logistics-content">{{msgDetail.receiverPhone}}</div>
        </div>
        <div class="logistics-box">
          <div class="logistics-title">收货人地址</div>
          <div class="logistics-content">
            {{msgDetail.receiverProvince + msgDetail.receiverCity+msgDetail.receiverRegion+msgDetail.receiverDetailAddress}}
          </div>
        </div>
        <div class="logistics-box">
          <div class="logistics-title">备注</div>
          <div class="logistics-content">
            {{msgDetail.note}}
          </div>
        </div>
      </div>
    </div>
    <div class="msg-detail-bootom-bar">
      <div class="service-btn" @click="openService">联系客服</div>
      <div class="sub-btn" v-if="msgDetail.status == 1&&this.msgDetail.receiverConfirm == 0" @click='subAddress'>确定
      </div>
    </div>
    <store-service :value.sync="showService"></store-service>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import {
    Icon,
    Cell,
    Toast,
    Card,
    Button,
    NavBar
  } from 'vant'
  import Arrow from '@/components/vue-scroller/components/Arrow.vue'
  import storeNavBar from '@/components/store-nav-bar'
  import storeScroller from '@/components/store-scroller'
  import { isIOS } from 'mobile-device-detect'
  import msgListContent from './components/msgListContent'
  import service from '@/utils/service'
  import storeService from '@/components/store-service'
  import Clipboard from "clipboard";

  export default {
    components: {
      [Icon.name]: Icon,
      [Cell.name]: Cell,
      [Card.name]: Card,
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      Toast,
      Arrow,
      storeNavBar,
      storeScroller,
      msgListContent,
      storeService
    },
    computed: {
      // ...mapState({
      //   content: state => state.home.content
      // })
      ...mapState({
        isLogin: state => state.user.isLogin,
        userInfo: state => state.user.userInfo
      }),
    },
    //   computed: {
    //   ...mapState({
    //     payChannels: state => state.payChannel.payChannel,
    //     userInfo: state => state.user.userInfo
    //   })
    // },
    data() {
      return {
        isIOS: isIOS,
        images: ['', '', '', ''],
        list: [],
        msgDetail: {
          orderItemList: []
        },
        showService: false
      }
    },
    created() {
      this.getMsgDetail();
      // console.log(this.$route.params.id)
      // this.$store.dispatch('home/content')
    },
    methods: {
      getMsgDetail() {
        this.$http.post("order/orderDetail", { orderId: this.$route.params.id }).then(data => {
          this.msgDetail = data.info;
        }).catch(error => {
        })
      },Copy() {
        let clipboard = new Clipboard("#copy");
        clipboard.on("success", e => {
          Toast.success("复制成功");
          // 释放内存
          clipboard.destroy();
          e.clearSelection();  
        });
        clipboard.on("error", e => {
          // 不支持复制
          Toast.fail("该浏览器不支持自动复制");
          // 释放内存
          clipboard.destroy();
          e.clearSelection();  
        });
        // alert('复制成功');
    },
      onClickLeft() {
        this.$router.push('/msg')
      },
      openService() {
        if (!this.isLogin) {
          this.$router.push('/login')
          this.$store.commit('user/SET_BEFOREPATH', this.$route.path)
          // Toast('用户未登录')
          return
        }
        const { umsMember } = this.userInfo;
        service.init(this.userInfo, null, null, () => {
          this.showService = true
        });
        // ysf('open', {})	
        // this.$http.post("/url", {})
        //   .then(res => {
        //     ysf("onready", () => {
        //       service.init(this.userInfo, this.goods , res.data.groupid, () => {
        //         this.showService = true
        //       });
        //     });
        //   })
        //   .catch(error => {

        //   });
        //初始化客服商品内容
        //  service.product(this.goods)
        // this.showService = true
      },
      subAddress() {
        this.$http.post("order/receiverConfirm", { orderId: this.$route.params.id }).then(data => {
          Toast('确认成功');
          this.msgDetail.receiverConfirm = 1;
        }).catch(error => {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .msg-detail {
    position: relative;
    overflow: auto;
    min-height: 100vh;

    .content {
      margin-top: 75px;
      padding: 0 15px;

      .sub-msg-card-box {
        padding: 8px 0;
        background: #fff;
        border-radius: 6px;

        .sub-msg-card {
          /* background: #fff; */
          display: flex;
          padding: 8px 16px;
          border-radius: 6px;

          .pic-box {
            width: 96px;
            height: 96px;
            margin-right: 12px;
            border-radius: 4px;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .sub-msg-content-box {
            width: 219px;

            .goods-name {
              font-size: $font-size-normal;
              color: $title-clr;
              line-height: 16px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .sku-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 12px;

              .sku-detail {
                font-size: $font-size-small;
                color: $text-clr;
              }

              .count {
                font-size: $font-size-normal;
                color: $gray-deep;
              }
            }

            .price {
              font-size: $font-size-normal;
              color: $primary-clr;
              margin-top: 12px;
            }
          }
        }
      }

      .sub-logistics-info {
        background: #fff;
        margin-top: 10px;
        padding: 0 16px;
        border-radius: 6px;
        .space-between{
            justify-content: space-between;
          }
          .logistics-copy-btn{
            padding: 4px;
            font-size: $font-size-small;
            color: $text-clr;
          }
        .logistics-box {
          display: flex;
          align-items: center;
          height: 46px;
          border-bottom: solid thin #F8F8F8;
          .logistics-order-box{
            display: flex;
            justify-content: center;
            align-items: center;
          }
          &:last-child {
            margin-bottom: 0;
          }

          .logistics-title {
            font-size: $font-size-normal;
            color: $primary-clr;
            margin-right: 12px;
            flex-shrink: 0;
          }

          .logistics-content {
            font-size: $font-size-small;
            color: $text-clr;
            word-break: break-all;
            word-wrap: break-word;
          }
        }

        /* div{
        word-break:break-all;word-wrap:break-word;
      } */
      }
    }

    .msg-detail-bootom-bar {
      position: absolute;
      bottom: 0;
      background: #fff;
      height: 49px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      padding: 0 15px;

      .service-btn {
        border: 1px solid #FE472D;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #FE472D;
        width: 90px;
        height: 30px;
      }

      .sub-btn {
        border: 1px solid #FE472D;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        background: #FE472D;
        width: 90px;
        height: 30px;
        color: #fff;
        margin-left: 12px;
      }
    }
  }
</style>